<template>
    <div class="mirror-notes-box" @mousedown="move">
        <!-- <div class="notes-box"> -->
            <div class="notes-select-bar" @click="NoteSelect">
                <i class="iconfont icon-tongzhi"></i>
                虚机共享信息
                <span v-show="shareStatus"></span>
            </div>
            <div id="notes-content" class="notes-content">
                <div class="notes-content-close" @click="NoteSelect">
                    <i></i>
                </div>
                <div class="notes-content-list">
                    <div class="notes-item" v-for="(item, index) in notesData">
                        <span v-text="item.username"  @click="NotesLink(item)"></span>
                        <i class="iconfont icon-link" @click="CloseNotes(item, index)">x</i>
                    </div>
                </div>
            </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //消息通知
                noteBottom: -172,
                notesData: [],
                // 通知消息
                websock: null,
                over: null,

                shareStatus: false,
                positionX:0,
                positionY:0,
            }
        },
        created () {
            let self = this
            // 初始化socket
            self.InitWebSocket()
            // 消息通知
            self.NoteNotice()
        },
        methods: {
            move(e){
                let app = document.body
                let odiv = e.target;        //获取目标元素
                let NotesContent = document.getElementById('notes-content')

                //算出鼠标相对元素的位置
                let disX = e.clientX - odiv.offsetLeft;
                let disY = e.clientY - odiv.offsetTop;
                document.onmousemove = (e)=>{       //鼠标按下并移动的事件
                    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                    let left = e.clientX - disX;
                    let top = e.clientY - disY;

                    //绑定元素位置到positionX和positionY上面
                    this.positionX = top;
                    this.positionY = left;
                    if (left <= 0) {
                        left = 0

                    } else if (left >= app.clientWidth - odiv.offsetWidth) {
                        left = app.clientWidth - odiv.offsetWidth;
                    }
                    if (top <= 0) {
                        top = 0
                    } else if (top >= app.clientHeight - odiv.offsetHeight) {
                        top = app.clientHeight - odiv.offsetHeight;
                    }
                    //移动当前元素
                    odiv.style.left = left + 'px';
                    odiv.style.top = top + 'px';
                    NotesContent.style.left = left + 'px';
                    NotesContent.style.top = top + 40 + 'px';
                };
                document.onmouseup = (e) => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            },
            //通知webSocket
            InitWebSocket(){
                let self = this
                let hostname = window.location.host
                const wsuri = "ws://"+hostname+"/tes/ws/global"
                self.websock = new WebSocket(wsuri);
                self.websock.onopen = self.websocketonopen;
                self.websock.onmessage = self.websocketonmessage;
                self.over = () => {
                    self.websock.close()
                }
            },
            websocketonopen(){
                console.log('open sucess')
            },
            websocketonmessage(e){ //数据接收
                let self = this
                let redata = JSON.parse(e.data)
                // type = 1 分享 2 关闭
                if(redata.type == 1){
                    let redataJson = {}
                    redataJson.chapterId = redata.chapterId
                    redataJson.userId = redata.userId
                    redataJson.username = redata.username
                    for(let i = 0; i < self.notesData.length; i++){
                        if(redata.chapterId == self.notesData[i].chapterId && redata.userId == self.notesData[i].userId){
                            self.notesData.splice(i, 1)
                        }
                    }
                    self.notesData.push(redataJson)
                    self.shareStatus = true
                }else if(redata.type == 2){
                    for(let i = 0; i < self.notesData.length; i++){
                        if(redata.chapterId == self.notesData[i].chapterId && redata.userId == self.notesData[i].userId){
                            self.notesData.splice(i, 1)
                        }
                    }
                }else if(redata.type == 3){
                    for(let i = 0; i < self.notesData.length; i++){
                        if(redata.chapterId == self.notesData[i].chapterId && redata.shareUserId == self.notesData[i].userId){
                            self.notesData.splice(i, 1)
                        }
                    }
                }
                if (self.notesData.length == 0) {
                    self.shareStatus = false
                    self.noteBottom = -172
                }
            },
            // 消息通知
            NoteNotice(){
                let self = this
                self.$http.get('/tes/experiment/share').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.length > 0){
                            self.shareStatus = true
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 虚拟共享信息
            NoteSelect(){
                let self = this
                self.shareStatus = false
                if(self.noteBottom == -172){
                    self.$http.get('/tes/experiment/share').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            if(res.data.length == 0){
                                self.$message({
                                    message: '暂时没有信息',
                                    type: 'warning'
                                })
                            }else{
                                self.notesData = res.data
                                self.noteBottom = 40
                            }
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })

                }else{
                    self.noteBottom = -172
                }
            },
            // 跳转分享虚机
            NotesLink(item) {
                let self = this
                let newWindow = window.open()
                let routeData = self.$router.resolve({
                    name: "ShareVirtualMachine",
                    query: {
                        courseId: item.userId,
                        chapterId: item.chapterId
                    }
                })
                // window.open(routeData.href, '_blank')
                newWindow.location.href = routeData.href
            },
            // 关闭分享共享虚机信息
            CloseNotes(item,index){
                let self = this
                self.$http.delete('/tes/experiment/share/'+item.userId+'/'+item.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.notesData.splice(index, 1)
                        if(self.notesData.length == 0){
                            self.noteBottom = -172
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        }
    }
</script>

